<template>
	<view>
		<BusNavbarSwiper ref="navbarSwiper" :navbarList="navbarList" :curNavbar="curNavbar" :height="'88rpx'" :dateList="dateList"
		 @handleChooseNavbar="handleChooseNavbar" @handleScrolltolower="handleScrolltolower" @handleRefresherrefresh="handleRefresherrefresh">
		</BusNavbarSwiper>

		<CommonPay ref="commonPay" :price="dateInfo.money" :orderInfo="orderInfo" @payMoney="payMoney" @wechatPaySuccess="wechatPaySuccess"></CommonPay>
		<CommonAlert ref="alert" :config="alertConfig" @confirm="handleConfirmCancleOrder"></CommonAlert>
		<CommonAlert ref="alert1" :config="alertConfig" @confirm="handleDelOrder"></CommonAlert>
	</view>
</template>

<script>
	import CommonPay from '@/components/common/common-pay.vue'
	import CommonAlert from '@/components/common/common-alert.vue'
	import BusNavbarSwiper from '@/components/user/bus-navbarSwiper.vue'
	export default {
		components: {
			BusNavbarSwiper,
			CommonPay,
			CommonAlert
		},
		data() {
			return {
				navbarList: [{
						name: '待支付',
						alias: 'toBePaid'
					},
					{
						name: '已支付',
						alias: 'paid'
					}
				],
				curNavbar: {
					name: '待支付',
					alias: 'toBePaid'
				},
				toBePaidList: [], // 待支付列表
				paidList: [], // 已支付列表
				page: {
					pageNum: 1,
					totalPageNum: 0,
					pageSize: 10,
				},
				dateInfo: {},
				alertConfig: {
					cancleText: '我再想想',
					confirmText: '确定取消',
					content: '是否取消订单'
				}
			};
		},
		computed: {
			dateList() {
				return [this.toBePaidList, this.paidList]
			},
			orderInfo() {
				let o = {
					orderNo: this.dateInfo.orderNo,
					type: 1
				}
				return o
			}
		},
		onLoad() {
			uni.$on('showCommonPay', (data) => {
				this.dateInfo = data
				this.$refs.commonPay.show()
			})
			uni.$on('showConfirmCancleOrderAlert', (data) => {
				this.dateInfo = data
				this.alertConfig.content = '是否取消订单'
				this.alertConfig.confirmText = '确定取消'
				this.$refs.alert.show()
			})
			uni.$on('showConfirmDelOrderAlert', (data) => {
				this.dateInfo = data
				this.alertConfig.content = '是否删除订单'
				this.alertConfig.confirmText = '确定删除'
				this.$refs.alert1.show()
			})
		},
		onShow() {
			this.getBusOrderList()
		},
		onUnload() {
			uni.$off('showCommonPay')
			uni.$off('showConfirmCancleOrderAlert')
			uni.$off('showConfirmDelOrderAlert')
		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				this.getBusOrderList()
			},
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.getBusOrderList()
			},
			handleScrolltolower(item, i) { // 上拉加载更多
				let totalPage = Math.ceil(this.page.totalPageNum / this.page.pageSize)
				if (this.page.pageNum >= totalPage) return
				this.page.pageNum++
				this.getMoreBusOrderList()
			},
			handleRefresherrefresh(item, i) {
				this.page.pageNum = 1
				this.getBusOrderList()
			},
			getBusOrderList() {
				this.page.pageNum = 1
				let type = this.curNavbar.alias === 'toBePaid' ? 1 : 2
				this.$http.get(this.$api.getBusOrderList + '?type=' + type + '&pageSize=' + this.page.pageSize + '&pageNum=' + this
					.page.pageNum).then(res => {
					if (res.code === 200) {
						this.page.totalPageNum = res.data.total
						this.$refs.navbarSwiper.stopPullDownRefresh()
						if (this.curNavbar.alias === 'toBePaid') {
							this.toBePaidList = res.data.result
						} else {
							this.paidList = res.data.result
						}
					}
				})
			},
			getMoreBusOrderList() {
				let type = this.curNavbar.alias === 'toBePaid' ? 1 : 2
				this.$http.get(this.$api.getBusOrderList + '?type=' + type + '&pageSize=' + this.page.pageSize + '&pageNum=' + this
					.page.pageNum).then(res => {
					if (res.code === 200) {
						this.page.totalPageNum = res.data.total
						if (this.curNavbar.alias === 'toBePaid') {
							this.toBePaidList = [...this.toBePaidList, ...res.data.result]
						} else {
							this.paidList = [...this.paidList, ...res.data.result]
						}
					}
				})
			},
			handleConfirmCancleOrder() {
				let data = this.dateInfo
				const _this = this
				// uni.requestSubscribeMessage({
				// 	tmplIds: ['58yzFNiV-am9kUCIMJjJV1DVDbS_M27xeXkhG6Q_ruc'],
				// 	success(res) {
				_this.$http.get(_this.$api.cancelBusOrder + _this.dateInfo.orderNo).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '取消订单成功'
						})
						_this.toBePaidList.forEach((item, i) => {
							if (item.orderNo === data.orderNo) {
								_this.toBePaidList.splice(i, 1)
							}
						})
					}
				})
				// 	}
				// })
			},
			// 删除订单
			handleDelOrder() {
				let data = this.dateInfo
				const _this = this
				_this.$http.get(_this.$api.deleteOrder, {noOrId: _this.dateInfo.orderNo, type:1} ).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '删除订单成功'
						})
						this.getBusOrderList()
					}
				})
			},
			payMoney(pwd) {
				this.$http.post(this.$api.busOrderPayMoney, {
					orderNo: this.dateInfo.orderNo,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						let data = this.dateInfo
						this.toBePaidList.forEach((item, i) => {
							if (item.orderNo === data.orderNo) {
								this.toBePaidList.splice(i, 1)
								this.getBusOrderList()
								this.curNavbar = {
									name: '已支付',
									alias: 'paid'
								}
								this.$refs.navbarSwiper.handleChooseNavbar(this.curNavbar, 1)
							}
						})
						uni.showToast({
							title: '支付成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		touch-action: none;
	}

	.swiper-wrap {
		height: calc(100vh - 88rpx);

		.swiper {
			.swiper-item {
				.content {
					height: 100%;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
